<template>
  <div class="home-page">
    <!-- 首页header -->
    <div class="header">
      <div class="header-top">
        <div class="logo-l"></div>
        <div class="icon-r">
          <van-icon
            name="shopping-cart-o"
            @click="tocart()"
            color="#fff"
            size="20"
          />
          <van-icon name="search" @click="tosearch()" color="#fff" size="20" />
        </div>
      </div>
      <div class="tags-view">
        <div class="tags-view-wrap" v-html="HomePageHotLabelData"></div>
      </div>
    </div>
    <!-- 首页body -->
    <div v-if="!loading" class="body">
      <!-- 热门图书 -->
      <div class="hot-book">
        <HomeTitle
          :name="homeData[0]?.tag.name"
          :tagId="homeData[0]?.tag.id"
        ></HomeTitle>
        <div class="book-list">
          <div class="book-list-wrap">
            <BookItemA
              v-for="i in homeData[0]?.tag.bookItems"
              :key="i.id"
              :id="i.id"
              :coverKey="i.coverKey"
              :bookName="i.name"
              :bookAuthors="i.authors"
            />
          </div>
        </div>
        <div class="sepline"></div>
      </div>
      <!-- 每周特价 -->
      <div class="special-offer">
        <HomeTitle
          :name="homeData[1]?.tag.name"
          :tagId="homeData[1]?.tag.id"
        ></HomeTitle>
        <div class="book-list">
          <div class="book-list-wrap">
            <BookItemA
              v-for="i in homeData[1]?.tag.bookItems"
              :key="i.id"
              :id="i.id"
              :coverKey="i.coverKey"
              :bookName="i.name"
              :bookAuthors="i.authors"
            />
          </div>
        </div>
        <div class="sepline"></div>
      </div>
      <!-- 纸书预售中 -->
      <div class="paper-book">
        <HomeTitle
          :name="homeData[2]?.tag.name"
          :tagId="homeData[2]?.tag.id"
        ></HomeTitle>
        <div class="sepline"></div>
      </div>
      <!-- 推荐文章 -->
      <div class="recommended-article">
        <HomeTitle
          :name="homeData[3]?.tag.name"
          :tagId="homeData[3]?.tag.id"
        ></HomeTitle>
        <div class="acticle-list">
          <ArticleItem
            v-for="a in homeData[3]?.tag.articleItems"
            :key="a.id"
            :coverKey="a.authorAvatarImageKey"
            :subject="a.subject"
            :authorNickName="a.authorNickName"
            :publishDate="a.publishDate"
            :tag="homeData[3]?.tag.name"
            @click.native="toArticle(a.id)"
          />
        </div>
        <div class="sepline"></div>
      </div>
      <!-- 图灵访谈 -->
      <div class="interview">
        <HomeTitle
          :name="homeData[4]?.tag.name"
          :tagId="homeData[4]?.tag.id"
        ></HomeTitle>
        <div class="acticle-list">
          <ArticleItem
            v-for="a in homeData[4]?.tag.articleItems"
            :key="a.id"
            :coverKey="a.authorAvatarImageKey"
            :subject="a.subject"
            :authorNickName="a.authorNickName"
            :publishDate="a.publishDate"
            :tag="homeData[4]?.tag.name"
            @click.native="toArticle(a.id)"
          />
        </div>
        <div class="sepline"></div>
      </div>
      <!-- 训练营 -->
      <div class="training-camp">
        <!-- title -->
        <div class="home-title">
          <div class="title-l">
            <i class="title-icon"></i>
            <p class="title-name">训练营</p>
          </div>
          <span class="title-r" @click="$router.push({ path: `/train` })"
            >更多</span
          >
        </div>

        <div class="training-list">
          <TrainItem
            v-for="t in homeTrainData"
            :key="t.id"
            :id="t.id"
            :coverKey="t.coverKey"
            :name="t.name"
            :teacherName="t.teacherName"
            :classHour="t.classHour"
            :userCount="t.userCount"
            :salePrice="t.salePrice"
          />
        </div>
        <div class="sepline"></div>
      </div>
    </div>
    <div v-if="loading" class="loading">
      <van-loading size="24px" vertical>加载中...</van-loading>
    </div>
  </div>
</template>

<script>
import { HomePageAPI, HomePageTrainAPI, HomePageHotLabelAPI } from "../apis";
import HomeTitle from "@/components/HomeTitle.vue";
import BookItemA from "@/components/BookItem-A.vue";
import ArticleItem from "@/components/ArticleItem.vue";
import TrainItem from "@/components/TrainItem.vue";

export default {
  name: "HomeView",
  data() {
    return {
      loading: true,
      homeData: [],
      homeTrainData: [],
      HomePageHotLabelData: [],
    };
  },
  mounted() {
    this.loading = true
    this.getHomePage();
    this.getHomePageTrain();
    this.getHomePageHotLabel();
    this.$emit("setactive", 0);
  },
  methods: {
    // 主要网络请求
    async getHomePage() {
      let { data } = await this.$http(HomePageAPI);
      this.homeData = data.blockContents;
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 网络请求(训练营)
    async getHomePageTrain() {
      let { data } = await this.$http(HomePageTrainAPI);
      this.homeTrainData = data.trainingPlanItems;
    },
    // 网络请求(热门标签)
    async getHomePageHotLabel() {
      let { data } = await this.$http(HomePageHotLabelAPI);
      this.HomePageHotLabelData = data.content;
    },
    // to 购物车
    tocart() {
      this.$router.push({ path: "/cart" });
    },
    // to 搜索框
    tosearch() {
      this.$router.push({ path: "/search" });
    },
    // to 文章
    toArticle(id) {
      this.$router.push({ path: `/article/${id}` });
    },
  },

  // 组件
  components: {
    HomeTitle,
    BookItemA,
    ArticleItem,
    TrainItem,
  },
};
</script>

<style lang="scss" scoped>
.home-page {
  width: 100vw;
  .header {
    background-color: var(--theme-blue);
    .header-top {
      padding: 20px 15px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .logo-l {
        background: url("../assets/logo.png") no-repeat 0 0;
        background-size: 180px 35px;
        width: 180px;
        height: 35px;
      }
      .icon-r {
        padding: 10px 0 0 10px;
        .van-icon-shopping-cart-o {
          margin-right: 20px;
        }
      }
    }
    .tags-view {
      box-sizing: border-box;
      width: 100vw;
      padding-left: 14px;
      padding-bottom: 16px;
      overflow-x: auto;
      &::-webkit-scrollbar {
        display: none;
      }
      .tags-view-wrap {
        display: flex;
        width: 950px;
        opacity: 0.5;
      }
    }
  }
  .body {
    margin-bottom: 80px;
    // 热门图书 , 每周特价
    .hot-book,
    .special-offer {
      .book-list {
        overflow-x: auto;
        &::-webkit-scrollbar {
          display: none;
        }
        .book-list-wrap {
          display: flex;
          padding-left: 15px;
          padding-top: 15px;
        }
      }
      .sepline {
        background-color: var(--more-bg-white);
        height: 10px;
        margin-top: 20px;
      }
    }
    // 纸书预售中
    .paper-book {
      .sepline {
        background-color: var(--more-bg-white);
        height: 10px;
        margin-top: 20px;
      }
    }
    // 推荐文章 , 图灵访谈
    .recommended-article,
    .interview {
      .acticle-list {
        padding: 0 15px 20px;
      }
      .sepline {
        background-color: var(--more-bg-white);
        height: 10px;
        margin-top: 20px;
      }
    }
    // 训练营
    .training-camp {
      .home-title {
        display: flex;
        justify-content: space-between;
        padding: 25px 15px 0 15px;
        .title-l {
          display: flex;

          .title-icon {
            display: block;
            background: url("../assets/title-icon.png") no-repeat 0 0;
            background-size: 20px 24px;
            width: 20px;
            height: 24px;
            margin-right: 6px;
          }
          .title-name {
            font-size: 16px;
            color: var(--title-name-black);
          }
        }
        .title-r {
          font-size: 14px;
          background-color: var(--more-bg-white);
          color: var(--more-font-grey);
          border-radius: 999px;
          padding: 3px 15px;
        }
      }
      .training-list {
        padding: 0 15px;
        margin-top: 15px;
        margin-bottom: 25px;
      }
    }
  }
}
</style>
